<template>
    <div>
        <!-- 在 "change" 事件后同步更新而不是 "input" -->
        <input v-model.lazy="msg" />
        <div>{{ msg }}</div>

        <button @click="obj.count++">增加</button>
        <div>{{ obj }}</div>


        <div v-for="i in 3" ref="itemRefs"></div>
    </div>
</template>

<script setup>
import { ref, reactive, watch, watchEffect, onMounted } from 'vue'




const msg = ref(null)
const obj = reactive({ count: 0 })
const itemRefs = ref([])
const input = ref(null)

onMounted(() => {
    // console.log(itemRefs.value)
})

watch(() => msg.value, (count) => {
    console.log(`count is: ${count}`)
},
    { immediate: false }
)
</script>

<style lang="scss" scoped></style>